<template>
	<div>
	  <!-- 日期 -->
		<el-date-picker
		v-model="dateRange"
		type="daterange"
		range-separator="至"
		start-placeholder="开始日期"
		end-placeholder="结束日期"
		@change="fetchData()">
	    </el-date-picker>
		<!-- 漏斗图 -->
	  <div ref="main" style="width: 600px;height:400px;"></div>
	  <!-- 折线图 -->
	  <div ref="main" style="width: 600px;height:400px;"></div>
		<!-- 表格 -->
		<el-table
		:data="tableData"
		border
		style="width: 100%">
		<el-table-column
		prop="categoryName"
		label="浏览人数"
		width="180">
	</el-table-column>
	<el-table-column
	prop="num"
	label="下单人数"
	width="180">
</el-table-column>
<el-table-column
	prop="num"
	label="订单数"
	width="180">
</el-table-column>

<el-table-column
prop="money"
label="下单件数">
</el-table-column>
<el-table-column
prop="money"
label="有效订单数">
</el-table-column>
<el-table-column
prop="money"
label="下单金额">
</el-table-column>
<el-table-column
prop="money"
label="退款金额">
</el-table-column>
<el-table-column
prop="money"
label="付款人数">
</el-table-column>
<el-table-column
prop="money"
label="付款订单数">
</el-table-column>
<el-table-column
prop="money"
label="付款件数">
</el-table-column>
<el-table-column
prop="money"
label="付款金额">
</el-table-column>
<el-table-column
prop="money"
label="客单价">
</el-table-column>

</el-table>
	</div>
</template>
<script>
import dayjs from 'dayjs';
// 进入echarts
import echarts from'echarts';
// 初始化eacharts


	export default {
		filters: {
			date(val){
				return dayjs(val).format('YYYY-MM-DD')
			}
		},
		data(){
			return {
				dateRange: [],
				tableData: [],
				totalNum: 0,
				totalMoney: 0,
				legendList: [0],
				numData: [],
				moneyData: [],

			}
		},
		mounted(){
			this.setCharts()
		},
		methods: {
			async fetchData(){
				let date1 = dayjs(this.dateRange[0]).format('YYYY-MM-DD');
				let date2 = dayjs(this.dateRange[1]).format('YYYY-MM-DD');
				console.log(date1);
				const res = await this.$http.get(`/api/categoryReport/category1Count.do?date1=${date1}&date2=${date2}`);
				this.tableData = res.data;
				this.totalNum = 0;
				this.totalMoney= 0;
				this.tableData.forEach((item,i) =>{
                      this.totalNum += item.num;
                      this.totalMoney += item.money;
                      //吧分类名称 保存到legendList
                      this.legendList.push(item.categoryName)
                      this.numData.push({name: item.categoryName, value: item.num})
                      this.moneyData.push({name: item.categoryName, value: item.money})
				})
			},
			async setCharts(){
				// this.$refs 只在页面加载完成后又用mounted
				const myChart = echarts.init(this.$refs.main);
				myChart.setOption({
					title: {
						text: '商品类目销售分析',
						subtext: '纯属虚构',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: this.legendList,
					},
					series: [
					{
						name: '访问来源',
						type: 'pie',
						radius: '35%',
						center: ['30%', '60%'],
						data: this.numData,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					},
					{
						name: '访问来源',
						type: 'pie',
						radius: '35%',
						center: ['80%', '60%'],
						data: this.moneyData,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
					]
					
				});
			}
		}
	}
</script>

<style scoped>
	
</style>